<template>
  <el-container>
    <el-header style="background: #409eff">
      <el-row justify="center">
        <div class="title">奖牌榜编辑</div>
      </el-row>
    </el-header>
    <el-main>
      <el-row justify="end">
        <el-space direction="vertical">
          <el-col :span="2"
            ><el-button type="success" @click="addAcition()"
              >添加</el-button
            ></el-col
          >
        </el-space>
      </el-row>
      <el-card class="box-card" shadow="never">
        <el-table
          :data="tableData"
          style="width: 100%"
          v-loading="loading"
          empty-text="暂无数据哦"
        >
          <el-table-column prop="ranking" label="排名" width="50">
          </el-table-column>
          <el-table-column prop="country" label="国家(中)" width="150">
          </el-table-column>
          <el-table-column prop="country_en" label="国家(英)" width="150">
          </el-table-column>
          <el-table-column prop="gold" label="金牌"> </el-table-column>
          <el-table-column prop="silver" label="银牌"> </el-table-column>
          <el-table-column prop="bronze" label="铜牌"> </el-table-column>
          <el-table-column fixed="right" label="操作">
            <template #default="scope">
              <el-button size="mini" @click="handleEdit(scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-main>
  </el-container>

  <el-dialog title="奖牌榜" v-model="dialogFormVisible">
    <el-form :model="form">
      <el-form-item label="排名序号">
        <el-input v-model="form.ranking"></el-input>
      </el-form-item>
      <el-form-item label="国家名称（中文）">
        <el-input v-model="form.country" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="国家名称（英文）">
        <el-input v-model="form.country_en" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="金牌数量">
        <el-input v-model="form.gold" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="银牌数量">
        <el-input v-model="form.silver" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="铜牌数量">
        <el-input v-model="form.bronze" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveAcition()">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import axios from "axios";
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      tableData: [],
      loading: false,
      dialogFormVisible: false,
      form: {
        id: "",
        ranking: "",
        country: "",
        country_en: "",
        gold: "",
        silver: "",
        bronze: "",
      },
    };
  },
  mounted() {
    // axios.defaults.baseURL = "http://dah.lovehottie.com";
    this.getList();
  },
  methods: {
    isRealNum(val) {
      if (val === "" || val == null) {
        return false;
      }
      if (!isNaN(val)) {
        return true;
      } else {
        return false;
      }
    },
    handleEdit(row) {
      this.form.id = row.id;
      this.form.ranking = row.ranking;
      this.form.country = row.country;
      this.form.country_en = row.country_en;
      this.form.gold = row.gold;
      this.form.silver = row.silver;
      this.form.bronze = row.bronze;
      this.dialogFormVisible = true;
    },
    handleDelete(row) {
      const { id } = row;
      axios
        .delete("/api/medal/" + id)
        .then((res) => {
          const data = res.data;
          if (data.code == 200) {
            // 删除成功
            this.isOk("删除成功");
            this.getList();
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 查询列表
    getList() {
      this.loading = true;
      axios
        .get("/api/medal")
        .then((res) => {
          this.loading = false;
          const data = res.data;
          if (data.code == 200) {
            this.tableData = data.data;
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    isOk(text) {
      ElMessage.success({
        message: text,
        type: "success",
      });
    },
    addAcition() {
      this.form.id = "";
      this.form.ranking = "";
      this.form.country = "";
      this.form.country_en = "";
      this.form.gold = "";
      this.form.silver = "";
      this.form.bronze = "";
      this.dialogFormVisible = true;
    },
    saveAcition() {
      const { id, ranking, country, country_en, gold, silver, bronze } =
        this.form;
      if (
        ranking.length == 0 ||
        country.length == 0 ||
        gold.length == 0 ||
        silver.length == 0 ||
        bronze.length == 0 ||
        country_en.length == 0
      ) {
        ElMessage.error("请完善信息哦");
        return;
      }
      if (
        !this.isRealNum(ranking) ||
        !this.isRealNum(gold) ||
        !this.isRealNum(silver) ||
        !this.isRealNum(bronze)
      ) {
        ElMessage.error("数字类型不能填写文字哦");
        return;
      }
      let data = {
        ranking: parseInt(ranking),
        country,
        country_en,
        gold: parseInt(gold),
        silver: parseInt(silver),
        bronze: parseInt(bronze),
      };
      if (id) {
        axios
          .put("/api/medal/" + id, data)
          .then((res) => {
            const data = res.data;
            if (data.code == 200) {
              // 编辑成功
              this.dialogFormVisible = false;
              this.isOk("编辑成功");
              this.getList();
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      } else {
        axios
          .post("/api/medal", data)
          .then((res) => {
            const data = res.data;
            if (data.code == 200) {
              // 添加成功
              this.dialogFormVisible = false;
              this.isOk("添加成功");
              this.getList();
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      }
    },
  },
};
</script>

<style>
.title {
  height: 60px;
  line-height: 60px;
  font-style: 36px;
  color: #fff;
}
</style>
